<template>
  <!-- 文章详情页 -->
  <view class="art-detail">
    <u-navbar
      :title="artDatas ? artDatas.title : '文章详情'"
      :is-back="true"
      :background="navBgStyle"
      title-color="#fff"
      back-icon-color="#fff"
    >
    </u-navbar>
    <!-- v-if="artDatas" -->
    <view class="content u-skeleton">
      <!-- 封面 -->
      <view class="art-cover">
        <view class="u-skeleton-fillet art-cover-img">
          <helang-blur
            :params="{
              //	封面毛玻璃样式
              width: '100%',
              image: artDatas.cover,
              blur: 'xs',
            }"
          >
          </helang-blur>
        </view>

        <view class="art-info">
          <!-- 标题 -->
          <view class="art-title u-skeleton-rect">
            <text>{{ artDatas.title }}</text>
          </view>

          <!-- 作者  -->
          <view class="author u-skeleton-rect">
            <u-avatar :src="artDatas.userAvatar" size="48"></u-avatar>
            <text class="author-name">{{ artDatas.userName }}</text>
            <text class="read-count">{{ artDatas.read_count }} 阅读</text>
          </view>
        </view>
      </view>
      <!-- 标题 -->

      <!-- 内容 -->
      <view class="parse-wrap u-skeleton-rect">
        <u-parse :html="artDatas.content" class="art-parse"></u-parse>
      </view>

      <!-- 间隔槽 -->
      <u-line color="#cbc9ca" margin="10rpx 0" />

      <!-- 发布时间和阅读量 -->
      <view class="created-Info u-skeleton-rect">
        <text
          >{{
            (artDatas.updatedA ? artDatas.updatedA : artDatas.createdAt)
              | date('yyyy年mm月dd日 hh时MM分')
          }}
          发布</text
        >
        <text
          >{{ artDatas.read_count }} 阅读 {{ artDatas.like_count }} 点赞
          {{ artDatas.comment_count }} 评论
        </text>
      </view>

      <!-- 间隔槽 -->
     <u-gap
        height="15"
        bg-color="#f7f4f5"
        margin-top="30"
        margin-bottom="10"
      ></u-gap>
        <!-- 最新评论内容 -->
      <view class="comment-wrap u-skeleton-rect">
        <comment
          :Info="artDatas"
          @blogLikeChange="blogLikeChange"
          @authorInterstChange="authorInterstChange"
          v-if="artDatas"
        ></comment>
      </view>
    </view>
    <!-- 骨架屏组件 -->
    <u-skeleton
      :loading="showSkeleton"
      :animation="true"
      bgColor="#fff"
    ></u-skeleton>
    <u-back-top
      :scroll-top="currentPageScrollTop"
      top="500"
      :icon-style="{ color: '#fff' }"
      :custom-style="{ backgroundColor: '#F2AE27' }"
    ></u-back-top>
  </view>
</template>

<script>
import { mapState } from 'vuex';
import helangBlur from '@/components/helang-blur/helang-blur.vue'; // 毛玻璃组件
import comment from '@/components/comment/comment.vue'; //	评论组件
export default {
  data() {
    return {
      showSkeleton: true,
      artDatas: '', //	博客数据
      currentPageScrollTop: 0, // 当前页面滚动条高度
    };
  },
  methods: {
    // 获取文章数据
    async getArtByBlogID(blogId) {
      let blogRes = await this._api.getArtByBlogId(blogId);
      this.artDatas = blogRes;
      setTimeout(() => {
        this.showSkeleton = false;
      }, 650);
    },
    /* 评论组件 点赞传出事件 更改评论数据列表
				type : 1 点赞
						0 取消点赞 
			 */
    blogLikeChange(type) {
      if (type) {
        // 点赞
        // 文章点赞数增加
        this.artDatas.like_count++;
        // 向文章点赞的用户列表里新增当前操作的用户
        this.artDatas.LikeBlogs.push({
          likeUserId: this.userInfo.id,
        });
      } else {
        // 	取消点赞
        this.artDatas.like_count--;
        this.artDatas.LikeBlogs = this.artDatas.LikeBlogs.filter((item) => {
          return item.likeUserId != this.userInfo.id;
        });
      }
    },
    /* 
				评论组件 关注作者传出时间  更改关注作者的数据列表
				type : 1 关注
						0 取消关注
			 */
    authorInterstChange(type) {
      if (type) {
        // 关注
        // 作者关注数增加
        this.artDatas.follow.count++;
        // 向关注作者的用户id集合新增当前用户的id
        this.artDatas.follow.rows.push({
          followUserId: this.userInfo.id,
        });
      } else {
        this.artDatas.follow.count--;
        // 过滤掉当前用户id
        this.artDatas.follow.rows = this.artDatas.follow.rows.filter((item) => {
          return item.followUserId != this.userInfo.id;
        });
      }
    },
  },
  components: {
    'helang-blur': helangBlur,
    comment,
  },
  onPageScroll(e) {
    this.currentPageScrollTop = e.scrollTop;
  },
  onLoad(options) {
    // 获取文章数据
    this.getArtByBlogID(options.artid);
  },
  computed: {
    ...mapState({
      // tabbarList: state => state.componStyle.tabbarList,	// 	tabbar列表
      navBgStyle: (state) => state.componStyle.navBgStyle, //	顶部导航栏样式
      userInfo: (state) => state.userInfo.userInfo, //	用户信息
    }),
  },
};
</script>

<style lang="scss" scoped>
.art-detail {
  position: relative;
  .content {
    min-height: calc(100vh - var(--status-bar-height) - 50px);
    position: relative;
    padding: 20rpx;
    .art-cover {
      min-height: 300rpx;
      position: relative;
      border-radius: 20rpx;
      border: 1rpx solid rgba(0, 0, 0, 0.3);
      overflow: hidden;
      margin-bottom: 15rpx;
      .art-cover-img {
        min-height: 350rpx;
      }
    }
    .parse-wrap {
      min-height: 800rpx;
    }
    .art-info {
      position: absolute;
      bottom: 0;
      width: 100%;
      padding: 20rpx;
      z-index: 10;
      .art-title {
        font-size: 48rpx;
        font-weight: 600;
        margin-bottom: 12rpx;
      }
      .author {
        display: flex;
        align-items: center;
        .author-name {
          font-size: 28rpx;
          margin-left: 8rpx;
        }
        .read-count {
          margin-left: 40rpx;
        }
      }
      background-color: rgba(0, 0, 0, 0.3);
      color: #fff;
    }

    .created-Info {
      font-weight: 600;
      font-size: 22rpx;
      text {
        margin-right: 40rpx;
      }
    }
    .comment-wrap {
      min-height: 50rpx;
    }
  }
}
</style>
